<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatSubjectLinkComponent/>
    </div>
    <!-- 页面主体 -->
    <div class="main-container">
      <div class="nav-breadcrumb">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="font-size: 16px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><span v-text="articleDetails.categoryName">Xxx</span></el-breadcrumb-item>
          <el-breadcrumb-item><span v-text="articleDetails.title">Xxx</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="main-wrap">
        <!-- 左侧主体 -->
        <div class="left-aside-container">
          <div class="left-aside-wrap">
            <!-- 左侧的文章详情 -->
            <div class="article-details">
              <h1 class="title" v-text="articleDetails.title"></h1>
              <div class="publish-info">
                <span>作者：</span>
                <span class="author" v-text="articleDetails.authorName"></span>
                <span>发布时间：</span>
                <span class="publish-time" v-text="articleDetails.gmtCreate"></span>
              </div>
              <div class="content" v-html="articleDetails.detail"></div>
            </div>
            <!-- 左侧的友情链接 -->
            <div class="friend-links">
              <h1 class="title">学茶商城合作伙伴</h1>
              <div class="content">
                <img src="/images/ncw-pc-join.jpg"/>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧的列表 -->
        <div class="right-aside-container">
          <div class="right-aside-wrap">
            <!-- 搜索区域 -->
            <SearchComponent :defaultSearchKeywords="defaultSearchKeywords"/>
            <!-- 推荐列表 -->
            <RecommendListComponent :recommendList="recommendList"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatSubjectLinkComponent from '@/components/FloatSubjectLinkComponentView.vue';
import SearchComponent from '@/components/SearchComponentView.vue';
import RecommendListComponent from '@/components/RecommendListComponentView.vue';
import ArticlesAPI from '@/http/apis/ArticlesAPI';
export default {
  components: {
    FloatSubjectLinkComponent,
    SearchComponent,
    RecommendListComponent
  },
  data() {
    return {
      pageTitle: '',
      defaultSearchKeywords: '',
      categoryList: [],
      recommendList: [],
      articleDetails: {},
    }
  },
  methods: {
    loadCategoryList() {
      let categoryList = [
        {id: 1, name: '推荐', url: '/tuijian'},
        {id: 2, name: '经验', url: '/jingyan'},
        {id: 3, name: '功效', url: '/gongxiao'},
        {id: 4, name: '冲泡', url: '/chongpao'},
        {id: 5, name: '存放', url: '/cunfang'},
        {id: 6, name: '禁忌', url: '/jinji'},
        {id: 7, name: '茶器', url: '/chaqi'},
        {id: 8, name: '文化', url: '/wenhua'},
        {id: 9, name: '花茶', url: '/huacha'}
      ];
      this.categoryList = categoryList;
    },
    loadPageTitle() {
      this.pageTitle = this.articleDetails.title + ' - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '黄金芽茶的口感特点';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadArticleDetails() {

      this.articleDetails = {
        id: 1,
        authorId: 1,
        authorName: "root",
        categoryId: 1,
        categoryName: "经验",
        title: "这份武夷岩茶的简介，建议收藏！",
        brief: "武夷岩茶是产于闽北武夷山岩上乌龙茶类的总称，主要品种有大红袍、水仙、奇种、肉桂、名丛等。其中，最为名贵、品质最优的就是大红袍。",
        coverUrl: "images/547736f5-e1e0-4259-9cbd-44b2e40926eb.png",
        keywords: "[{\"id\":26, \"name\":\"经验\"}]",
        ip: "127.0.0.1",
        sort: 99,
        upCount: 0,
        downCount: 0,
        clickCount: 0,
        commentCount: 0,
        checkState: 1,
        isDisplay: 1,
        isRecommend: 1,
        detail: "<h1 data-we-empty-p=\"\" id=\"vzupv\">测试文章详情1</h1><blockquote><p>你可以自由的对文章详情进行图文混排。<br/></p></blockquote><p>关于图文混排，你可以：</p><ul><li>段落排版</li><li>字符排版</li><li>添加超链接</li><li>添加引用</li><li>添加预定义表情</li><li>上传图片或直接插入图片</li><li>添加视频</li><li>添加表格</li><li>其它<br/></li></ul>",
        gmtCreate: "2023-06-01 08:00.00",
        gmtModified: "2023-06-01 08:00.00"
      };
      this.loadPageTitle();
      this.$store.state.articleCategoryLink = '/jinji'

    },
    loadRecommendList() {
      let recommendList = [
        {
          id: 1,
          title: '茶友必读：如何正确使用盖碗！',
          image: '/images/20191108_9F9DCE3C8DBC0D51FDF120BD805CF32F.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 2,
          title: '穆教授讲银壶',
          image: '/images/20191108_22ED0D61E361D1053F4AB0B1E8E4D466.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 3,
          title: '中国古风茶壶，风情万种！',
          image: '/images/20191108_093E9EE6B8D528433CA408A466FE774B.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 4,
          title: '你用的铜壶安全吗',
          image: '/images/20191108_2CF5E8662046796E734D12E5E670A5F7.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 5,
          title: '多图｜史上最全品茗杯图鉴',
          image: '/images/20191108_A4A3F2FD5494D0A89B61124ED08C1747.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 6,
          title: '金壶、银壶、铁壶、老铁壶、陶壶、玻璃壶烧水泡茶有啥区别？',
          image: '/images/20191108_6F93D75423CC801189148B8A14325D53.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 7,
          title: '茶具，你真的洗对了吗？',
          image: '/images/20191108_B61EF435EAFB02A1844DEE283151B6CE.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 8,
          title: '紫砂壶知识︱小壶钮，大作用',
          image: '/images/20191108_497DD45319B417A246DA8BC85E7B6512.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 9,
          title: '如何选一把好的银壶',
          image: '/images/20191108_00BC8EDB8235F99DAA25440D56E05C8F.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 10,
          title: '茶具怎么挑？挑选茶具要注意哪些细节？',
          image: '/images/20191108_347209F09DC22BCB1C9E92AC14FEC182.jpg',
          link: '/article/details?id=9527'
        }
      ];
      this.recommendList = recommendList;
    }
  },
  mounted() {
    this.loadDefaultSearchKeywords();
    this.loadCategoryList();
    this.loadRecommendList();
    this.loadArticleDetails();
  }
}
</script>

<style>
.article-details {
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}

.article-details .title {
  margin: 0px auto 20px auto;
}

.article-details .publish-info {
  color: #999;
  font-size: 14px;
  margin: 0px auto 20px auto;
}

.article-details .publish-info .author {
  margin-right: 30px;
}

.article-details .publish-info .publish-time {
}

.article-details .content {
  margin: 10px auto;
  border-top: 1px solid #ddd;
  padding: 20px 20px 0px 20px;
  text-align: left;
  font-size: 18px;
  color: #333;
}

.article-details .content p {
  margin: 24px auto;
}

.friend-links {
  margin-top: 20px;
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}

.friend-links .title {
  margin: 0px auto 20px auto;
}

.friend-links .content img {
  width: 810px;
}
</style>